
<div style="POSITION: relative" id="content">
  <h3>easyUI 添加排序到datagrid</h3>
  <div id="article_content" class="article_content">
    <p>这个示例展示如何排序datagrid通过点击列表头.</p>
    <p><img src="documentation/images/1344568376_2836.png" alt=""><br>
    </p>
    <p>在datagrid的所有columns 可以通过点击列表头排序,你可以定义哪行可以排序,默认的列是不能排序的除非你设置sortable 属性为true</p>

    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 创建an DataGrid</h4>
    <pre name="code" class="html">&lt;table id=&quot;tt&quot; class=&quot;easyui-datagrid&quot; style=&quot;width:600px;height:250px&quot;  
        url=&quot;datagrid8_getdata.php&quot;  
        title=&quot;Load Data&quot; iconCls=&quot;icon-save&quot;  
        rownumbers=&quot;true&quot; pagination=&quot;true&quot;&gt;  
    &lt;thead&gt;  
        &lt;tr&gt;  
            &lt;th field=&quot;itemid&quot; width=&quot;80&quot; sortable=&quot;true&quot;&gt;Item ID&lt;/th&gt;  
            &lt;th field=&quot;productid&quot; width=&quot;80&quot; sortable=&quot;true&quot;&gt;Product ID&lt;/th&gt;  
            &lt;th field=&quot;listprice&quot; width=&quot;80&quot; align=&quot;right&quot; sortable=&quot;true&quot;&gt;List Price&lt;/th&gt;  
            &lt;th field=&quot;unitcost&quot; width=&quot;80&quot; align=&quot;right&quot; sortable=&quot;true&quot;&gt;Unit Cost&lt;/th&gt;  
            &lt;th field=&quot;attr1&quot; width=&quot;150&quot;&gt;Attribute&lt;/th&gt;  
            &lt;th field=&quot;status&quot; width=&quot;60&quot; align=&quot;center&quot;&gt;Stauts&lt;/th&gt;  
        &lt;/tr&gt;  
    &lt;/thead&gt;  
&lt;/table&gt;  </pre>

    <p>我们定义一些可排序的列包含itemid,productid,listprice,unitcost等等'attr1'列和 'status'列不能排序.</p>
    <p>当排序DataGrid将发送2个参数到远程服务器:</p>

    <ul style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left">
      <li>sort: 排序列字段名.</li>
      <li>order: 排序方式, 可以是 'asc' 或者 'desc', 默认&#20540;是 'asc'.</li>
    </ul>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 服务器端代码</h4>
    <pre name="code" class="php">$page = isset($_POST['page']) ? intval($_POST['page']) : 1;  
$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;  
$sort = isset($_POST['sort']) ? strval($_POST['sort']) : 'itemid';  
$order = isset($_POST['order']) ? strval($_POST['order']) : 'asc';  
$offset = ($page-1)*$rows;  
  
$result = array();  
  
include 'conn.php';  
  
$rs = mysql_query(&quot;select count(*) from item&quot;);  
$row = mysql_fetch_row($rs);  
$result[&quot;total&quot;] = $row[0];  
  
$rs = mysql_query(&quot;select * from item order by $sort $order limit $offset,$rows&quot;);  
  
$items = array();  
while($row = mysql_fetch_object($rs)){  
    array_push($items, $row);  
}  
$result[&quot;rows&quot;] = $items;  
  
echo json_encode($result);  </pre>

    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 下载EasyUI示例代码:</h4>
    <div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px"> <a href="http://www.jeasyui.com/tutorial/datagrid/downloads/easyui-datagrid8-demo.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-datagrid-demo.zip</a></div>
  
  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>